<script lang="ts" setup>
  import { GamePlayResult, GamePlay, GameEnrollType } from '@/types/game';
  import { computed, ref } from 'vue';
  import { deleteGamePlay, runGamePlay } from '@/api/game';
  import { Modal } from '@arco-design/web-vue';

  const props = defineProps<{
    gamePlay: GamePlayResult;
    playTypes: GamePlay[];
    enrollTypes: GameEnrollType[];
    withRun: boolean;
  }>();

  const emit = defineEmits(['update']);

  const curPlayType = computed(() => {
    return props.playTypes.find((i) => i.id === props.gamePlay.playId);
  });

  const curGroupType = computed(() => {
    return props.enrollTypes.find((i) => i.id === props.gamePlay.enrollType);
  });

  const running = ref(false);
  const startRun = async () => {
    running.value = true;
    try {
      await runGamePlay(props.gamePlay.id);
      emit('update');
    } finally {
      running.value = false;
    }
  };

  const handleDeleteGamePlay = () => {
    Modal.confirm({
      title: '提示',
      content: '确认删除该成绩吗？',
      async onBeforeOk() {
        await deleteGamePlay(props.gamePlay.id);
        emit('update');
      },
    });
  };

  const goToRank = () => {
    window.open(
      `${import.meta.env.VITE_WWW_URL}/game/play-result?gameId=${
        props.gamePlay.gameId
      }&playId=${props.gamePlay.id}`
    );
  };
</script>

<template>
  <div class="game-play">
    <div class="game-play-top">
      <div class="game-play-name">
        {{ gamePlay.name }}
      </div>
      <a-space>
        <a-button
          v-if="withRun && gamePlay.result"
          :loading="running"
          @click="startRun"
        >
          <template #icon><icon-play-arrow /></template>
          重新运行
        </a-button>

        <a-button v-if="!withRun || gamePlay.result" @click="goToRank">
          <template #icon><icon-link /></template>
          查看成绩
        </a-button>

        <a-button v-else-if="withRun" :loading="running" @click="startRun">
          <template #icon><icon-play-arrow /></template>
          运行玩法
        </a-button>

        <a-button @click="handleDeleteGamePlay">
          <template #icon><icon-delete /></template>
          删除成绩
        </a-button>
      </a-space>
    </div>
    <div class="game-play-bottom">
      <a-space>
        <a-tag>
          {{ ['', '个人', '团队', '配对'][gamePlay?.calType || 0] }}
        </a-tag>
        <a-tag>{{ curPlayType?.name }}</a-tag>
        <a-tag v-if="curGroupType" color="green">
          {{ curGroupType?.name }}
        </a-tag>
        <a-tag v-if="gamePlay?.calType === 1 || gamePlay?.calType === 2">
          {{ ['仅限女性', '仅限男性', '男女'][gamePlay?.sex || 0] }}
        </a-tag>
        <template v-if="gamePlay?.calType === 1 || gamePlay?.calType === 2">
          <a-tag v-if="(gamePlay.userType & 0b00000001) === 0b00000001">
            青少年
          </a-tag>
          <a-tag v-if="(gamePlay.userType & 0b00000010) === 0b00000010">
            成人
          </a-tag>
          <a-tag v-if="(gamePlay.userType & 0b00000100) === 0b00000100">
            教练
          </a-tag>
        </template>
        <a-tag v-if="gamePlay?.calType === 1 || gamePlay?.calType === 3">
          分区方式：{{
            ['', '不分区', '按省份分区', '按球场分区'][gamePlay?.groupBy || 0]
          }}
        </a-tag>
        <a-tag v-if="gamePlay?.calType === 2">
          组队依据：{{ ['', '省份', '城市', '球场'][gamePlay?.teamBy || 0] }}
        </a-tag>
      </a-space>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .game-play {
    border: 1px solid var(--color-border-2);
    padding: 12px;
    border-radius: 4px;

    &-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    &-name {
      font-size: 15px;
      font-weight: 600;
    }
  }
</style>
